<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo2-angularJS --分页</title>
<!--#include virtual="/mes-demo/include/header_style.html" -->
<!--#include virtual="/mes-demo/include/header_script.html" -->
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>
	<br />
	<div class="row" ng-app="DemoApp"  ng-controller="DemoController" style="margin:15px" ng-init="ajaxData()">
	     <div>
			<table class="table table-striped table-hover table-condensed table-bordered">
                <thead>
					<tr>
                        <th>ID</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>班级</th>
					</tr>
				</thead>
				<tbody>
				  <tr ng-repeat="item in list">
				     <td>{{item.id}}</td>
				     <td>{{item.name}}</td>
				     <td>{{item.age}}</td>
				     <td>{{item.calss}}</td>
				  </tr>
				</tbody>
				<tfoot ng-if="pageCount==0">
					<tr>
						<td colspan="12" class="text-center">没有检索到数据</td>
					</tr>
				</tfoot>
			</table><!-- 分页导航条 -->
	</div>
	    <div class="col-sm-12 text-center"  ng-if="loadState">
	        <img src="/mes-demo/static/bmsmart/images/loading.gif" />
	    </div>
	    <div class="col-md-12" ng-if="!loadState">
	           <div class="col-md-4 pagination-pagesize">
                    <div class="text-left">
                                                                                  显示 <span>
                               <select  ng-change="changeSize(default)" ng-model="default" ng-init="default='10'">
                                    <option ng-repeat="item in selectItems" value="{{item}}">{{item}}</option> 
					          </select>
                           </span>项结果&nbsp; &nbsp;显示第 <span ng-bind="startRow"></span> 到 <span ng-bind="endRow"></span> 项结果,共 <span ng-bind="totalCount"></span> 项
                    </div>
                </div>
                 <div class="col-md-8">
	                    <div class="pull-right">
	                       <ul class="pagination">
	                             <li ng-class="{disabled:pageIndex==1||pageCount==0}"><a href="javascript:void(0)" ng-click="first()">首页</a></li>
	                             <li ng-class="{disabled:pageIndex==1||pageCount==0}"><a href="javascript:void(0)" ng-click="previous()">上一页</a></li>
	                       </ul>
	                       <ul class="pagination" ng-repeat="x in allPages" >
		                        <li ng-class="{active: x == pageIndex }">
	                                <a href="#"  ng-click="gotoPage(x)" >{{x}}</a>
	                            </li>
	                       </ul>
	                        <ul class="pagination">
	                             <li ng-class="{disabled:pageIndex==pageCount||pageCount==0}"><a href="javascript:void(0)" ng-click="next()">下一页</a></li>
	                             <li ng-class="{disabled:pageIndex==pageCount||pageCount==0}"><a href="javascript:void(0)" ng-click="last()">尾页</a></li>
	                       </ul>
	                    </div>
                 </div>
	    </div>
	</div>
	<script type="text/javascript">
	 var app = angular.module("DemoApp",[]);//定义模块  加入angularJS 分页
	 app.controller('DemoController',function($scope,$http){
		
		//默认的分页参数设置
		 $scope.loadState = true;//加载状态
		 $scope.pageSize =  10//分页大小 
		 $scope.pageIndex = 1; //要访问的页码
		 $scope.pageCount = 1;//总页数
		 $scope.allPages =  []; //页码数
		 $scope.totalCount = 1;//多少条数据
		 $scope.startRow = 1 ;//开始行
		 $scope.endRow = 1;//结束行
		 
		 $scope.selectItems = [10,20,25,50,100]; //分页大小
			 
		 //加载数据
		 $scope.ajaxData = function(){
			//限制请求页码在该数据页码范围内
			 if( $scope.pageIndex < 1){
				 $scope.pageIndex = 1;
			 }
			 if($scope.pageIndex > $scope.pageCount){
				 $scope.pageIndex = $scope.pageCount;
			 }
			 
			 //需要向后台传递的数据
			  var postData = {
					 pageno :$scope.pageIndex,
					 pagesize: $scope.pageSize
			 }
			 
			  $http({
					 method:'POST',
					 url:'/mes-demo/hello/findPage/index.do',
					 params:postData //传递参数
				    }).then(function succ(response){
					 //请求成功执行代码
					 //清空页码数组
					  $scope.allPages.splice(0, $scope.allPages.length);
					 
					  $scope.loadState = false;
					 
					 $scope.list =  response.data.data.list; // 返回的数据源 绑定到table
					 
					 $scope.pageCount = response.data.data.pages; 
					 
					 $scope.totalCount = response.data.data.total;
					 
					 $scope.startRow = response.data.data.startRow ;
					 
					 $scope.endRow = response.data.data.endRow;
					 //装填页码
					 
						 for(var i=1;i<=response.data.data.pages;i++){
								 $scope.allPages.push(i);
								 $scope.$applyAsync();  			 
						 }
					 
				 },function error(response){
					 //请求失败执行代码
				 });
		 };
		 
		 //分页方法
		 $scope.first = function(){// 首页
			 $scope.pageIndex = 1;
			 $scope.ajaxData();
		 };
		 
		 $scope.previous = function(){// 上一页
			 $scope.pageIndex = $scope.pageIndex-1;
			 $scope.ajaxData();
		 };
		 
		 $scope.last = function(){// 尾页
			 $scope.pageIndex = $scope.pageCount;
			 $scope.ajaxData();
		 };
		 
		 $scope.next = function(){// 下一页
			 $scope.pageIndex = $scope.pageIndex+1;
			 $scope.ajaxData();
		 };
		 
		 $scope.gotoPage = function(x){//跳转
			 $scope.pageIndex = x;
			 $scope.ajaxData();
		 };
		 
		 $scope.changeSize = function(x){//改变大小
			 $scope.pageSize = x;
			 $scope.ajaxData();
		 };
		 
	 });
		
	</script>
</body>
</html>